<template>
  <van-row class="myAttention_item" type="flex" justify="space-between" @click="companyGo">
    <van-col span="1"></van-col>
    <van-col span="22">
      <div style="display:flex;margin-bottom:10px">
        <div>
          <van-image round cover :src="dataItem.avatar" width="1.5rem" height="1.5rem" />
        </div>
        <div style="margin-top: 6px;padding-left:10px">
          <div
            style="text-align:left"
          >近聘昵称：{{ (dataItem && dataItem.nick_name) ? dataItem.nick_name : '' }}
          <van-button
              style="marginLeft:5px;"
              plain
              type="info"
              size="mini"
              @click.stop="chat(dataItem)"
            >发送消息</van-button>
          </div>
          <div style="text-align: left;margin-top: 15px;">近聘账号：{{ dataItem.ids }}</div>
          <div
            style="text-align: left;margin-top: 10px;display: flex;justify-content: space-between;align-items: center"
          >
            手 机 号 &nbsp;：{{ dataItem.account ? dataItem.account : dataItem.mobile }}
            <van-button
              style="marginLeft:5px;"
              plain
              type="info"
              size="mini"
              @click.stop="phoneContact(dataItem.account ? dataItem.account : dataItem.mobile)"
            >电话联系</van-button>
          </div>
        </div>
      </div>
      <div style="text-align: left" class="concern_item">
        <span>公司名称：</span>
        <span>{{ (dataItem && dataItem.name) ? dataItem.name : dataItem.company_name }}</span>
      </div>
      <div
        style="text-align: left;margin-top: 10px;display: flex;justify-content: space-between;align-items: center;width: 82%"
      >
        公司电话：{{ dataItem.line_phone }}
        <van-button
          style="marginLeft:5px;"
          plain
          type="info"
          size="mini"
          @click.stop="phoneContact(dataItem.line_phone)"
        >电话联系</van-button>
      </div>
      <div  style="margin-top: 10px; text-align: left" class="concern_item">
        <span>公司地址：</span>
        <span>{{ dataItem && dataItem.fulle_address ? dataItem.fulle_address : '' }}</span>
        <div @click.stop="toMapPage_job(dataItem)">
          <img style="width:20px;height:20px;" src="../assets/img/address.png" />
          <div style="width: 40px;">复制</div>
        </div>
      </div>
      <div v-if="showFolltime" style="margin-top: 10px; text-align: left" class="concern_item">
        <span>关注时间：</span>
        <span>{{ dataItem && dataItem.folltime ? dataItem.folltime : '' }}</span>
      </div>
      <slot></slot>
    </van-col>
  </van-row>
</template>

<script>
import {Dialog, Toast} from 'vant'
import logoImg from '@/assets/logo.png'
export default {
  name: 'comMyAttention',
  props: ['dataItem'],
  data() {
    return {
      logoImg
    }
  },
  computed: {
    showFolltime() {
      return !this.$attrs['no-folltime']
    },
    canGoCompany() {
      return !this.$attrs['can-not-go-company']
    }
  },
  mounted() {
    this.logoImg = this.dataItem.logo
  },
  methods: {
    applyAuth() {
      Toast('申请授权！')
    },
    ip() {},
    copy(str) {
      var save = function (e) {
        e.clipboardData.setData('text/plain', str) //下面会说到clipboardData对象
        e.preventDefault() //阻止默认行为
      }
      document.addEventListener('copy', save)
      document.execCommand('copy') //使文档处于可编辑状态，否则无效
    },
    toMapPage_job(val) {
      const destinationPosition = {
        longitude: val.lng,
        latitude: val.lat,
        address: val.street_name,
        FullAddress: val.fulle_address
      }

      //弹出复制窗口
      Dialog.alert({
        title: '点击确认复制地址到剪贴板',
        message: `地址：${destinationPosition.FullAddress}`,
        showCancelButton: true
      }).then(() => {
        // on close
        this.copy(destinationPosition.FullAddress)
      })
      // todo url里面带有参数对象
      // 路由传参 https://www.jianshu.com/p/d276dcde6656
      // this.$router.push({
      //   path: '/map',
      //   query: {
      //     // 将传递的对象解析为字符串
      //     destinationPosition: JSON.stringify(destinationPosition)
      //   }
      // })
    },
    phoneContact(val) {
      window.location.href = `tel:${val}`
    },
    companyGo() {
      this.canGoCompany &&
        this.$router.push({
          path: `/company/${this.dataItem.id}`
        })
    },
    // 发送消息
    chat(data){
      console.log(data)
      let _self = this
      let GetThreeManualServiceList = window.localStorage.getItem('GetThreeManualServiceList')
      let companyInfo = JSON.parse(GetThreeManualServiceList)
      let companyDetail = {}
      for (var i = 0; i < companyInfo.length; i++) {
        if (data.id == companyInfo[i].CompanyId) {
          companyInfo[i].company = 'company'
          companyInfo[i].Name = '公司客服'
          // companyInfo[i].category_id = category_id //求职类型
          companyInfo[i].enterprise_name = data.nick_name //职位昵称
          companyInfo[i].id = data.id //公司id
          // companyInfo[i].sign_state = _self.needObj.sign_state
          // companyInfo[i].sign_remark = _self.sign_remark
          companyDetail = companyInfo[i]
        }
      }
      _self.signaR.getMessage(companyDetail)
      _self.$router.push({name: 'chat', params: companyDetail})
    }
  }
}
</script>

<style lang="scss" scoped>
.myAttention_item {
  background-color: #ffffff;
  text-align: center;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  line-height: 1.1em;
  padding: 16px 6px 12px 6px;
  font-size: 13px;
  .concern_item {
    display: flex;
    span {
      &:first-of-type {
        width: 5.5em;
        font-size: 13px;
        /* 某一项不缩放  */
        flex-shrink: 0;
      }
      &:last-of-type {
        letter-spacing: 0.3px;
      }
    }
  }
}
</style>
